import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:riverpod_t/base/base_async_consumer.dart';
import 'package:riverpod_t/page/home/data/model/detail_model_entity.dart';
import 'package:riverpod_t/page/home/river/home_detail_river.dart';
import 'package:riverpod_t/page/home/river/home_detail_scroll_river.dart';
import 'package:riverpod_t/page/home/state/home_detail_state.dart';
import 'package:riverpod_t/page/home/widget/app_bar_content.dart';
import 'package:riverpod_t/page/home/widget/bottom_content_widget.dart';
import 'package:riverpod_t/page/home/widget/des_widget.dart';
import 'package:riverpod_t/page/home/widget/novel_header_widget.dart';
import 'package:riverpod_t/page/home/widget/recommend_widget.dart';
import 'package:riverpod_t/page/home/widget/series_widget.dart';
import 'package:riverpod_t/until/app_util.dart';
import 'package:status_bar_control/status_bar_control.dart';
import '../../../base/base_stateful_page.dart';

class HomeDetailPage extends BasePage {
  final String imageUrl;
  const HomeDetailPage({super.key, required this.imageUrl});

  @override
  BasePageState<BasePage> getState() => _HomeDetailPageState();
}

class _HomeDetailPageState extends BasePageState<HomeDetailPage> {
  @override
  void initState() {
    super.initState();
    pageBackgroundColor = const Color(0xFFF3F4F8);
    showAppBar = false;
  }

  /// 构建自定义导航栏
  Widget _buildAppBar() {
    return Consumer(
      builder: (BuildContext context, WidgetRef ref, Widget? child) {
        final appBarAlpha = ref.watch(homeDetailScrollRiverProvider.select((state) => state.alpha));
        final scrollOffset = ref.watch(
          homeDetailScrollRiverProvider.select((state) => state.scrollOffset),
        );
        final detailModel = ref.watch(
          homeDetailRiverProvider.select((state) => state.value?.modelData),
        );

        return Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: AnimatedOpacity(
            opacity: appBarAlpha,
            duration: const Duration(milliseconds: 100),
            child: Container(
              height: statusBarHeight + kToolbarHeight,
              padding: EdgeInsets.only(top: statusBarHeight),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(bottom: BorderSide(width: 1.h, color: Colors.black12)),
              ),
              child: AppBarContent(
                detailModel: detailModel,
                scrollOffset: scrollOffset,
                appBarAlpha: appBarAlpha,
              ),
            ),
          ),
        );
      },
    );
  }

  /// 构建底部控件
  Widget _buildBottomWidget(DetailModelData? detailModel) {
    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: BottomContentWidget(epList: detailModel?.ep),
    );
  }

  /// 构建列表内容
  Widget _buildListContent(HomeDetailState state, WidgetRef ref) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notification) {
        ref.read(homeDetailScrollRiverProvider.notifier).updateScroll(notification.metrics.pixels);
        double alpha = notification.metrics.pixels / 100;
        if (alpha == 0) {
          StatusBarControl.setStyle(StatusBarStyle.LIGHT_CONTENT);
        } else if (alpha > 0) {
          StatusBarControl.setStyle(StatusBarStyle.DARK_CONTENT);
        }
        return false;
      },
      child: ListView(
        physics: const ClampingScrollPhysics(),
        padding: EdgeInsets.only(bottom: bottomSafeAreaHeight + 30.h),
        children: [
          NovelHeaderWidget(model: state.modelData, imageUrl: widget.imageUrl),
          DesWidget(model: state.modelData),
          SeriesWidget(seriesList: state.seriesComics),
          RecommendWidget(list: state.recommends),
        ],
      ),
    );
  }

  @override
  Widget buildPage(BuildContext context) {
    return BaseAsyncConsumer<HomeDetailState>(
      provider: homeDetailRiverProvider,
      builder: (context, state, ref) {
        if (AppUtil.isEmpty(state.recommends)) {
          return const SizedBox();
        }

        return Container(
          margin: EdgeInsets.only(bottom: bottomSafeAreaHeight),
          child: Stack(
            children: [
              _buildListContent(state, ref),
              _buildAppBar(),
              _buildBottomWidget(state.modelData),
            ],
          ),
        );
      },
    );
  }
}
